import { Form, Typography, ConfigProvider, theme, Descriptions, GetProp } from "antd";
import { ReactNode } from "react";

interface FormDescriptionsItem extends Pick<GetProp<typeof Descriptions, 'items'>[number], 'label' | 'children' | 'key'> { }
interface FormDescriptionsProps { items: FormDescriptionsItem[]; footer?: ReactNode; }
export function FormDescriptions({ items, footer }: FormDescriptionsProps) {
  const { token } = theme.useToken();

  return (
    <ConfigProvider
      theme={{
        components: ({
          Form: {
            labelColor: token.colorTextDescription,
            itemMarginBottom: 0,
            verticalLabelPadding: 0,
          },
        }),
      }}
    >
      <Form layout="vertical">
        <Typography.Paragraph>
          <pre className="!m-0">
            {items.map(({ label, children, key }, index) => (
              <Form.Item required label={label} key={key ?? index}>
                <pre className="!m-0"><span>{children}</span></pre>
              </Form.Item>
            ))}
          </pre>
        </Typography.Paragraph>
      </Form>
    </ConfigProvider>
  );
}
